<template>
	<view class="chat">
		<view class="chat-data">
			<view class="chat-item" v-for="(item, index) in chat" :key="index">
				<!-- 机器人消息 -->
				<view :show="true" mode="fade-left" v-if="item.name == 'chatgpt'">
					<view class="chat-item__left u-flex">
					
						<image class="avatar" :src="robot.param2 || '../../../static/robot.png'"></image>
						<view class="chat-item__left-right">
							<view class="chat-item__left-name"> {{ robot.param1 || 'Chat GPT' }} </view>
							<view class="chat-item__left-bottom" @click="copy(item.message)">
								<view class="chat-item__left-message">
									<text color="#fff">{{item.message || '思考中...'}}</text>				
								</view>
													
								<view style="margin-top:auto;">
									<image class="icon" :src="'../../../static/copy.png'" ></image>				
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 我的消息  -->
				<view :show="true" mode="fade-right" v-else>
					<view class="chat-item__right">
						<view class="chat-item__right-message" @longtap="copy(item.problem)">
							<text>{{item.message}}</text>		
						</view>
						<image class="avatar" :src="'../../../static/go.png'" style="width: 30px;height: 30px;"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="send">
			<textarea v-model="problem" placeholder="请输入内容" auto-height maxlength="100"/>
			<button type="primary" @click="getAnswer" v-show="problem || loading" :loading="loading">发送</button>
		</view>
	</view>
</template>

<script>
	import chatMixin from "../../../mixins/chat.js";
	import adMixin from "../../../mixins/ad.js"
	export default {
		mixins: [chatMixin, adMixin],
		data() {
			return {
				type: "chat",
				robot:{},
				device:uni.getSystemInfoSync().platform,//操作系统名
			};
		},
		onLoad(e) {
			this.getRobot()
			this.toBottom()
			this.problem = e.problem || ''
		},
		methods:{
			// 获取机器人配置
			async getRobot(){
				//机器人数据
				this.request({url:'/chat/robot?device='+this.device,method:'get',successCb:(res)=>{
					this.robot = res?.data || {}
				}})
				
			},
		}
	};
</script>

<style lang="scss" scoped>
	.chat {
		font-family: "Microsoft YaHei", sans-serif;
		
		max-width: 960px;
		padding: 4px 4px 80px 4px;
		box-sizing: border-box;
		uni-image.avatar{ width: 38px;height: 38px}
		uni-image.icon{width: 26px;height: 26px}
		&-item {
			&__left {
				display: flex;
				margin-top: 10px;

				&-right {
					margin-left: 6px;
				}

				&-name {

				}

				&-message {
					margin-top: 6px;
					background: #ffffff;
					padding: 10px;
					border-radius: 4px;
					color: #1a1a1a;
					margin-right: 0;
				}

				&-bottom {
					display: flex;
				}
			}

			&__right {
				display: flex;
				margin-top: 10px;
				justify-content: flex-end;

				&-message {
					margin-right: 6px;
					background: #95eb6c;
					padding: 10px;
					border-radius: 4px;
				}
			}
		}
	}

	.send {
		align-items: end;
		display: inline-flex;
		background: #f7f7f7;
		padding: 4px;
		box-sizing: border-box;
		position: fixed;
		bottom: 50px;
		left: 50%;
		transform: translateX(-50%);
		max-width: 960px;
		width: 100%;
	
	
		uni-textarea {
			width: 100%;
			min-height: 32px;
			background: #ffffff;
			padding-left:6px;
			padding-top:8px;
		}

		uni-button {
			margin-left: 6px;
			width: 50px;
			height: 40px;
			padding: 0;
			font-size: 14px;
			background-color: #05c160;
			line-height: 40px;
		}
	
	
	}
	
</style>
